<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toDetails"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.dword2}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask"></image>
			</view>
		</view>
		<view class="total">
			<view class="line1">
				<view class="word1">
					{{$data.$language.Maximumrelease}}
				</view>
				<view class="word2">
					{{$data.$language.iword2}}
				</view>
			</view>
			<view class="line2">
				<view class="word1">{{steDaTa.max_bonus}}</view>
				<!-- <view class="word2"></view> -->
				<view class="word3">{{steDaTa.release}}%</view>
			</view>
			<view class="line3">
				<view class="word1">{{$data.$language.Releasebase}} {{steDaTa.fh}} </view>
				<!-- <view class="word2"></view>
				<view class="word3"></view> -->
			</view>
		</view>
		<view class="deal">
			<view class="dealTitle">
				{{$data.$language.idealTitle}}
			</view>
			<view class="dealList">
				<view class="detailBox"   v-for="(item,index) in logs.data" :key="index">
					<view class="detail1">
						<image src="../../static/qianbaoxiangqing_slices/bianzu.png" mode=""></image>
						<view class="middle">
							<view class="letter" v-if="item.f_type==0">
								USDT
							</view>
							<view class="letter" v-else>
								WONE
							</view>
							<view class="date">
								{{ formatTime(item.createtime)}}
							</view>
						</view>
						<view class="right">
							<view class="number">
								+{{item.money}}
							</view>
							<view class="word">
								{{$data.$language.iword}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="detailBox detailBox2">
					<view class="detail1 detail2">
						<image src="../../static/钱包详情_slices/bianzu.png" mode=""></image>
						<view class="middle">
							<view class="letter">
								USDT
							</view>
							<view class="date">
								06/25 09:41
							</view>
						</view>
						<view class="right">
							<view class="number">
								+10.00
							</view>
							<view class="word">
								每日释放
							</view>
						</view>
					</view>
				</view>
				<view class="detailBox detailBox2">
					<view class="detail1 detail2">
						<image src="../../static/钱包详情_slices/bianzu.png" mode=""></image>
						<view class="middle">
							<view class="letter">
								USDT
							</view>
							<view class="date">
								06/25 09:41
							</view>
						</view>
						<view class="right">
							<view class="number">
								+10.00
							</view>
							<view class="word">
								每日释放
							</view>
						</view>
					</view>
				</view>
				<view class="detailBox detailBox2">
					<view class="detail1 detail2">
						<image src="../../static/钱包详情_slices/bianzu.png" mode=""></image>
						<view class="middle">
							<view class="letter">
								USDT
							</view>
							<view class="date">
								06/25 09:41
							</view>
						</view>
						<view class="right">
							<view class="number">
								+10.00
							</view>
							<view class="word">
								每日释放
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import { getPledge } from '@/api/index.js'
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	export default {
		data() {
			return {
				// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				isDrawerOpen: false,
				isOpenMask: false,
				release:'',
				wone:'',
				woo:'',
				logs:{},
				page:'1',
				steDaTa:{},
				TotalData:{},
			}
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.loadData()
		},
		methods: {
			refreshLanguage(locale) {
			      if (locale === 'zh-CN') {
			        this.$language = zhCN
			      } else if (locale === 'en-US') {
			        this.$language = enUS
			      }else{
					  this.$language = trCN
				  }
				  uni.reLaunch({
				    url: '/pages/impawn/impawn' // 当前页面的lujing
				  });
				  
			},
			formatTime(timestamp) {
			    const date = new Date(timestamp*1000);
			    const year = date.getFullYear();
			    const month = date.getMonth() + 1;
			    const day = date.getDate();
			    const hours = date.getHours();
			    const minutes = date.getMinutes();
			    const seconds = date.getSeconds();
			    
			     const formattedDate = `${month}/${day} ${hours}:${minutes}`;
			        return formattedDate;
			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/details/details'
				})
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			loadData() {
			    getPledge({
					page:this.page
				},
			        (data) => {
			          // 处理成功返回的数据
					  this.TotalData = data
					  this.steDaTa = data
					  this.wone = data.wone
					  this.woo = data.woo
					  this.logs = data.logs
			        },
			        (errorMsg) => {
			          // 处理请求失败或错误的情况
			          console.error(errorMsg);
			        }
			    );
			},
		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style>
	.box {
		background: linear-gradient(18deg, #fff, #fff, #fff, #fff, #ADBEDE, #8BA3CD);
	}

	.head {
		padding: 40rpx;
	}

	.headTitle {
		display: flex;
	}

	.title {
		width: 262rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin-left: 110rpx;
		text-align: center;
		margin-top: 28.85rpx;

	}

	.total {
		width: 702rpx;
		height: 246rpx;
		background: linear-gradient(90deg, #034ED4 0%, #4286F4 100%);
		border-radius: 16rpx;
		margin: 0 0 0 24rpx;
		overflow: hidden;
	}

	.total .line1,
	.total .line2,
	.total .line3 {
		display: flex;
		justify-content: space-between;
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.total .line1 .word1 {
		/* width: 174rpx; */
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 40rpx;
		margin: 34rpx 0 0 0rpx;
	}

	.total .line1 .word2 {
		/* width: 174rpx; */
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 40rpx;
		margin: 34rpx 0 0 0rpx;
	}

	.total .line2 .word1 {
		/* width: 128rpx; */
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		margin: 8rpx 0 0 0rpx;
	}

	.total .line2 .word2 {
		/* width: 76rpx; */
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-top: 26rpx;
		margin-left: 6rpx;
	}

	.total .line2 .word3 {
		width: 128rpx;
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		margin: 8rpx 0 0 172rpx;
	}

	.total .line3 .word1 {
		/* width: 114rpx; */
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 40rpx;
		margin: 34rpx 0 0 0rpx;
	}

	.total .line3 .word2 {
		width: 106rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #CEDDF7;
		line-height: 32rpx;
		margin: 42rpx 0 0 8rpx;
	}

	.total .line3 .word3 {
		width: 62rpx;
		height: 22rpx;
		font-size: 20rpx;
		font-family: ArialMT;
		color: #CEDDF7;
		line-height: 22rpx;
		margin: 50rpx 0 0 10rpx;
	}

	.deal {
		margin-top: 42rpx;
	}

	.dealTitle {
		/* width: 282rpx; */
		height: 46rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		margin-left: 24rpx;
	}

	.detailBox {
		width: 702rpx;
		height: 140rpx;
		background: #F4F6FA;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 16rpx 0 0 24rpx;
	}

	.detail1 {

		border-radius: 16rpx;
		margin-top: 38rpx;
		display: flex;
	}

	.detail1 image {
		height: 40rpx;
		width: 34rpx;
		margin: 18rpx 0 0 32rpx;
	}

	.middle .letter {
		width: 128rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 32rpx;
		margin: 4rpx 0 0 18rpx;
	}

	.middle .date {
		width: 188rpx;
		height: 28rpx;
		font-size: 24rpx;
		font-family: ArialMT;
		color: #939393;
		line-height: 28rpx;
		margin: 12rpx 0 0 18rpx;
	}

	.right .number {
		width: 168rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 36rpx;
		margin-left: 230rpx;
		text-align: right;
	}

	.right .word {
		width: 296rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AA7;
		line-height: 34rpx;
		text-align: right;
		margin: 4rpx 0 0 102rpx;
	}

	.detailBox2 {
		margin: 20rpx 0 0 24rpx;
	}
</style>